//node的路径模块
const path = require('path')
//启用热更新的第二步
const webpack = require('webpack')
//导入在内存中生成html页面的插件，只要是插件都需要放到plugins里面去
//这个插件的两个作用：
// 1.自动在内存中根据指定页面生成一个内存的页面
// 2.自动，把打包好的bundle.js追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, './src/main.js'), //入口，webpack要打包哪个文件
  output: { //输出文件相关的配置
    path: path.join(__dirname, './dist'), //指定打包好的文件输出到哪个目录中去
    filename: 'bundle.js' //指定输出的文件名称
  },
  devServer: { //webpack-dev-server --open --port 8099 --contentBase src --hot 的第二种配置方式
    open: true, //自动打开浏览器
    hot: true, //启用热更新 第一步
    // contentBase: 'src', 指定托管的根目录
    port: 8009 //设置启动时候的运行端口
  },
  plugins: [ //配置插件的节点
   new webpack.HotModuleReplacementPlugin(), //new一个模块更新的对象，这是启用热更新的第三步
   new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
     template: path.join(__dirname, './src/index.html'), //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
     filename: 'index.html' //指定生成的页面名称,结构跟'./src/index.html'是一样的，只不过拷贝了一份放内存中
   })
  ],
  module: { //这个节点用于配置所有的第三方模块加载器
    rules: [ //所有第三方的模块匹配规则
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'] //配置处理.less文件的第三方loader规则
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'] //配置处理.scss文件的第三方loader规则
      },
      {
        test: /\.(png|jpg|gif|bmp|jpeg)$/,
        use: 'url-loader?limit=20803&name=[name].[ext]'//处理图片路径的loader
      },
      {
        test: /\.(ttf|woff2|eot|svg|woff)$/,
        use: 'url-loader'//处理字体文件的loader
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      } //这是配置Babel来转换高级的es语法
    ]
  }
}